@width:1200px;
#color(){
    color1 :#ff4400;
    color2:#ff7500;
    color3:#fff;
    color4:#ff5000;
}
body{
    width: 100%;
    background-color: #f4f4f4;
   height: 1500px;
}

.zud{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index:1111;
    display: none;
    background-color: #fff;
    .zudone{
        width: 1200px;
        height: 100%;
       margin: 0 auto;

        display: grid;
        grid-template-columns: 260px 1fr;
        .zudone_logo{
            background: url(../images/logo1.png) no-repeat 0 center;
        }
        .zudone_search{
            position: relative;
            align-self: center;
            width: 629px;
            overflow: hidden;
            color: #ccc;
            .fa-search{
                position: absolute;
                top: 12px;
                left: 20px
            }
            .fa-camera{
                position: absolute;
                top: 12px;
                right: 106px;
            }
            input{
                float: left;
                width:542px;
                height: 38px;
               border: none;
               color: #ccc;
               font-size: 14px;
               border: 2px solid #color[color4];
               border-radius: 40px 0 0 40px;
               outline: none;
               padding-left: 40px;
               
            }
            .search_right{
                float: left;
                width: 87px;
                height: 38px;
                text-align: center;
                line-height: 38px;
                background-color: #ff8900;
                border-radius: 0 40px 40px 0;
            }
        }
    }
}
/*  快捷导航栏开始 */
.shortcut{
    display: grid;
    grid-template-columns: 250px 1fr 747px;
    width: @width;
    height: 33px;
    margin: 0 auto;
    ul{
        li{
            display: inline-block; 
            color: #6c6c6c;
            font-size: 13px;   
            padding: 0 5px; 
            &:nth-child(1){
                position: relative;
                .zicaidan1{
                    width: 267px;
                    height: 280px;
                    position: absolute;
                   top: 33px;
                   left: 0;
                   background-color: #fff;
                   overflow: auto;
                   z-index: 999;
                   display: none;
                   ul{
                       li{
                           display: block;
                           &:hover{
                               background-color:#f4f4f4;
                           }
                           a{
                               color: #3C3C3C;
                           }
                       }
                   }
                }
                &:hover{
                    background-color: #fff;
                }
               &:hover .zicaidan1{
                display: block;
               }
               &:hover a{
                color:#3C3C3C;
               }
            }     
            a{
                display: inline-block;
                height: 33px;
                text-align: center;
                line-height: 33px;
                color: #6c6c6c;
                font-size: 12px;
                &:hover{
                    text-decoration: none;
                    color: #color[color1];
                }
            }
            i{
                padding: 0 5px;
                font-size: 10px;
                box-sizing: border-box;
            }
        }
        
    }
    .shortcut_right{
        grid-column: 3/span 1;
        
        ul{
            text-align: right;
            span{
                display: inline-block;
                width: 1px;
                height: 10px;
                background-color: #ddd;
            }
            li{
                &:nth-child(1){
                    position: relative;
                        ul{
                            position: absolute; 
                        top: 33px;
                        left: 0;
                        width: 84px;
                        height: 71px;
                        background-color: #fff;
                        line-height: 25px;
                        display: none;
                            li{
                                display: block;
                                float: left;
                                a{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    font-size: 12px;
                                    color:#3c3c3c
                                }
                                &:hover a{
                                    background-color: #f4f4f4;
                                }
                            }   
                        }  
                        &:hover ul{
                            display: block;
                        } 
                        &:hover .myTao{
                            color:#color[color1]
                        } 
                }
                &:nth-child(2){
                    i{
                        &:nth-child(1){
                            color:#color[color1]
                        }
                    }
                }
                &:nth-child(9){
                    i{
                        &:nth-child(1){
                            color:#color[color1]
                        }
                    }
                }
            }
            
            
        }
    }
}
/* 快捷导航栏结束 */
/* 头部开始 */
.header{
    width: 100%;
    height: 70px;
    background:#e71b1b; 
    img{
        display: block;
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    }
}
/*头部结束 */
/* 搜索开始 */
.section{
    width: 100%;
    height: 120px;
    background-color: #color[color3];
    .items{
        display: grid;
        grid-template-columns: 190px 1fr 275px;
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        .logo{
            background: url(../images/logo.png) no-repeat center;
            h1{
                width: 100%;
                height: 100%;
                font-size: 0;
                z-index: 1;
                a{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .search{
        display: grid;
        grid-template-rows: 80px 1fr;
        .top{
            position: relative;
            justify-self: center;
            align-self: end;
            width: 629px;
            overflow: hidden;
            padding-left: 40px;
            padding-top: 20px;
            color: #ccc;
            ul{
                padding-left: 22px;
                li{
                    display: inline-block;
                    width: 35px;
                    height: 23px;                                              
                    a{
                        display: block;
                        width: 100%;
                        height: 100%;
                        font-size: 12px;
                        text-align: center;
                        line-height: 23px;
                        color:#color[color1];
                        border-radius: 5px 5px 0  0;
                    }
                    &:nth-child(1) a{
                        background-color: #color[color2];
                        color:#color[color3]
                    }
                }
            }
            .fa-search{
                position: absolute;
                top: 56px;
                left: 58px
            }
            .fa-camera{
                position: absolute;
                top: 56px;
                right: 105px;
            }
            input{
                float: left;
                width:542px;
                height: 38px;
               border: none;
               color: #ccc;
               font-size: 14px;
               border: 2px solid #color[color4];
               border-radius: 40px 0 0 40px;
               outline: none;
               padding-left: 40px;
               
            }
            .search_right{
                float: left;
                width: 87px;
                height: 38px;
                text-align: center;
                line-height: 38px;
                background-color: #ff8900;
                border-radius: 0 40px 40px 0;
            }
        }
        .hotwords{
            justify-self: center;
            
            ul{
                li{
                    display: inline-block;
                   
                    font-size: 12px;
                }
                a{
                    color: #3c3c3c;
                }
            }
        }
    }
    .right{
        position: relative;
        grid-column: 3/span 1;
        justify-self: center;
        align-self: center;
        width: 80px;
        height: 88px;
        border: 1px solid #ccc;
        font-size: 12px;
        color: #color[color1];
        text-align: center;
        margin-top: 10px;
        
        img{
            width: 60px;
            height: 60px;
        }
        .fa-times{
            position: absolute;
            left: -13px;
            border: 1px solid #eee;
            color:#eee;
        }
    }
}
/*! 搜索结束 */

.section2{
    width: @width;
    height: 550px;
    display: grid;
    grid-template-rows: 30px 1fr;
    grid-template-columns: 190px 703px 1fr;
    margin: 0 auto;
    z-index: 11;
    /*! 导航栏开始 */
    .nav{
        display: grid;
        grid-template-columns: 190px 1fr;
        width: @width;
        height: 30px;
        margin: 0 auto;
    
        .dropdown{
            background-color: #color[color4];
            font-size: 16px;
            color: #color[color3];
            text-align: center;
            line-height: 30px;
            
        }
        .dt{
            height: 520px;
            grid-row: 2/span 1;
            display: grid;
            grid-template-rows: repeat(15,1fr);
            align-items: center;
            border: 1px solid #color[color4];
            background-color: #color[color3];
           padding-top: 5px;
            a{  
                position: relative;
                display:block;
                height: 100%;
                line-height: 35px;
                color: #666666;
                font-size: 14px;
                padding-left: 25px;
            span{
                position: absolute;
                top: 0px;
                right: 10px;
                color: #ccc;
                font-size: 12px;
            }
            &:hover{
                background-color: pink;
                color: #color[color2];
            }
            &:hover span{
                color: #color[color2];
            }
            }
        }
        .navitems{
            display: grid;
            grid-template-columns: repeat(10,1fr) 240px;
            background: -webkit-linear-gradient(left,#ff8600,#ff5000);
            a{
                position: relative;
                color:#color[color3];
                font-size: 16px;
                text-align: center;
                line-height: 30px;
                img{
                    position: absolute;
                    top: -11px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: none;
                }
                &:hover img{
                    display: block;
                }
                &:nth-child(3){
                    position: relative;
                    span{
                        position: absolute;
                        top: 10px;
                        left: 79px;
                        display: block;
                        width: 1px;
                        height: 12px;
                        background-color: #ccc;
                    }
                }
                &:nth-child(7){
                    position: relative;
                    span{
                        position: absolute;
                        top: 10px;
                        left: 77px;
                        display: block;
                        width: 1px;
                        height: 12px;
                        background-color: #ccc;
                    }
                }
            }
        }
    }
    /* !导航栏结束 */
    /* 轮播图开始 */
    .banner{
        grid-column: 2/ span 1;
        grid-row: 2 /span 1;
        display: grid;
        grid-template-columns: 530px 1fr;
        .left{
         height: 100%;
            .left_top{
                position: relative;
             padding-top: 10px;
                margin-bottom: 25px;
                img{
                    width: 100%;
                }
                &:hover .before {
                    display: block;
                }
                &:hover .after {
                    display: block;
                }
                .before{
                    position: absolute;
                    left: 0px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 20px;
                    color: #fff;
                    width: 22px;
                    height: 32px;
                    border-radius: 0 16px 16px 0;
                    background-color: rgba(0, 0, 0, .4);
                    line-height: 32px;
                    cursor:pointer;
                    text-align:left;
                    padding-left: 3px;
                    display: none;
                }
                .after{
                    position: absolute;
                    right: 0px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 20px;
                    color: #fff;
                    width: 22px;
                    height: 32px;
                    border-radius:16px 0px 0px 16px;
                    background-color: rgba(0, 0, 0, .4);
                    line-height: 32px;
                    text-align:right;
                    cursor:pointer;
                    text-align: right;
                    padding-right: 3px;
                    display: none;
                }
            }
            .left_boootom{
                position: relative;
                background-color: #color[color3];
                border-top: 3px solid #ff1648;
                margin: 37px 11px 0;
                padding-top: 5px;
                #banner2{
                    position: relative;
                    img{
                        margin: 0 15px;
                      
                    }
                    &:hover .after2 {
                        display: block;
                    }
                    &:hover .before2 {
                        display: block;
                    }
                    .before2{
                        position: absolute;
                        left: 0px;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 20px;
                        color: #fff;
                        width: 22px;
                        height: 32px;
                        border-radius: 0 16px 16px 0;
                        background-color: rgba(0, 0, 0, .4);
                        line-height: 32px;
                        cursor:pointer;
                        text-align:left;
                        padding-left: 3px;
                        display: none;
                        z-index: 999;
                    }
                    .after2{
                        position: absolute;
                        right: 0px;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 20px;
                        color: #fff;
                        width: 22px;
                        height: 32px;
                        border-radius:16px 0px 0px 16px;
                        background-color: rgba(0, 0, 0, .4);
                        line-height: 32px;
                        text-align:right;
                        cursor:pointer;
                        text-align: right;
                        padding-right: 3px;
                        display: none;
                        z-index: 999;
                    }
                }
                .oneImg{
                    position: absolute;
                    top:-25px;
                    left: 0;
                    width: 122px!important;
                    height: 22px!important;

                }
            }
        }
        .right{
            margin-top: 10px;
            padding-left: 2px;
            img{
                &:nth-child(1){
                    margin-bottom: 34px;
                    height: 276px;
                }
            }
        }
    }
    /* 轮播图结束 */
    /* 个人模块开始 */
    .user{
        grid-row: 2/span 1;
        grid-column: 3/span 1;
        display: grid;
        margin-top: 10px;
        grid-template-rows: 137px 69px 77px 155px 77px ;
        background-color: #color[color3];
        .user_message{
            grid-row: 1/span 1;
            padding-top: 5px;
                box-sizing: border-box;
            .head_img{
                width: 56px;
                height:56px;
                margin: 0 auto;
                border-radius: 28px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                 }
                
            }
           span{
               display: block;
               font-size: 8px;
               text-align: center;
              
               height: 17px;
               line-height: 17px;
               a{
                color: #3C3C3C;
               }
           }
           p{
               text-align: center;
               height: 17px;
            line-height: 17px;
               a{
                   display: inline-block;
                   height: 17px;
                   border-radius: 10px;
                   color:#color[color4];
                   font-size: 8px;
                   text-align: center;
                   line-height: 17px;
                   &:nth-child(1){
                       width: 107px;
                       background: #ffe4db url(../images/sptite.png) no-repeat 17px;
                       background-position: 0 -572px;
                   }
                   &:nth-child(2){
                       width: 95px;
                       background: #ffe4db url(../images/sptite.png) no-repeat 17px;
                       background-position: 0 -528px;
                   }
               }
           }
           .wuliu{
               height: 40px;
               
               ul{
                   display: grid;
                grid-template-columns: repeat(4,1fr);
                li{
                    text-align: center;
                    a{
                        font-size: 8px;
                        color:#color[color1];
                        p{
                            color:#3c3c3c;

                        }
                    }
                }
               }
           }
        }
        .ad{
            img{
                width: 100%;
            }
        }
        .tab{
            height: 77px;
            display: grid;
            grid-template-rows: 45px 1fr;
            .tab_top{
                padding: 0 8px;
                ul{
                    display: grid;
                    grid-template-columns: repeat(5,1fr);
                    li{
                        display: inline-block;
                        text-align: center;
                        line-height: 45px;
                        &:hover a{
                            border-bottom:2px solid #color[color1] ;
                        }
                        a{
                            font-size: 15px;
                            color:#3C3C3C;
                        }
                    }
                }
            }
            .tab_bottom{
                color: #color[color1];
                font-size: 15px;
                padding-left: 13px;
            }
        }
        .function{
            display: grid;
            grid-template-rows: repeat(2,1fr);
            grid-template-columns: repeat(4,1fr);
            a{
                display: block;
                text-align:center;
                color:#333333;
                font-size: 14px;
                border: 1px solid #f4f4f4;
                margin-right: -1px;
                margin-top: -1px;
                &:nth-child(1){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center 6px ;
                    }
                }
                &:nth-child(2){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -81px ;
                    }
                }
                &:nth-child(3){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -37px ;
                    }
                }
                &:nth-child(4){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -123px ;
                    }
                }
                &:nth-child(5){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -168px ;
                    }
                }
                &:nth-child(6){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -212px ;
                    }
                }
                &:nth-child(7){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -256px ;
                    }
                }
                &:nth-child(8){
                    p{
                        height: 50%;
                        background: url(../images/sptite.png) no-repeat center -299px ;
                    }
                }
            }
        }
        .download{
            display: grid;
            grid-template-rows: 26px 1fr;
            .download_top{
                text-align: center;
                line-height: 26px;
                padding: 7px  15px 0;
                p{
                    a{
                        color: #3c3c3c;
                    }
                   &:nth-child(1){
                       float: left;
                       font-weight: 600;
                   }
                   &:nth-child(2){
                    float: right;
                    font-size: 13px;
                }
                }
            }
            .download_bottom{
                grid-row: 2/span 1;
              ul{
                  height: 100%;
                display: grid;
                grid-template-columns: repeat(5,1fr);
                align-items: center;
                justify-items: center;
               
                li{
                    border-radius: 5px;
                    overflow: hidden;
                    width: 33px;
                    height: 33px;
                    a{
                        display: block;
                        width: 100%;
                        height: 100%;
                       
                        img{
                            width: 100%;
                        }
                    }
                }
              }
            }
        }
    }
    /* 个人模块结束 */
}

/* 侧边栏开始 */
   article{
        position: fixed;
        top:75px;
        right:12px;
        width: 50px;
        height: 313px;
        display: grid;
        grid-template-rows: repeat(6,1fr);
        background-color: #color[color3];
        place-items: center;
        overflow: hidden;
        border-radius: 10px;
        box-sizing: border-box;
        display: none;
        a{
            position: relative;
            display:block;
            box-sizing: border-box;
            width: 100%;
            padding: 9px;
            font-size: 14px;
            text-align: center;
            color:#666666;
            &:nth-child(1){
                background-color: #color[color4];
                color: #color[color3];
            }
           
            &:nth-child(2){
    
                color: #color[color1];
                &::after{
                    display: block;
                    position: absolute;
                    top: 55px;
                    content: '';
                    width: 30px;
                    border-bottom: 1px solid #ccc;
                }
            }
            &:nth-child(3){
    
                color: greenyellow;
                &::after{
                    display: block;
                    position: absolute;
                    top: 55px;
                    content: '';
                    width: 30px;
                    border-bottom: 1px solid #ccc;
                }
            }
            &:nth-child(4){
    
                color: #color[color4];
                &::after{
                    display: block;
                    position: absolute;
                    top: 55px;
                    content: '';
                    width: 30px;
                    border-bottom: 1px solid #ccc;
                }
                
            }
            &:nth-child(5){
                &::after{
                    display: block;
                    position: absolute;
                    top: 40px;
                    content: '';
                    width: 30px;
                    border-bottom: 1px solid #ccc;
                }
            }
            &:nth-child(6){
                display: none;
                &::after{
                    display: block;
                    position: absolute;
                    top: 37px;
                    content: '';
                    width: 30px;
                    border-bottom: 1px solid #ccc;
                }
            }
            &:nth-child(7){
    
                border: none;
            }
        }
    }

/* 侧边栏结束 */